<template>
  <div :style="{ width: width, height: height }" ref="bloodTiesChartRef"></div>
</template>

<script lang="ts" setup>
import { onMounted, watch, ref, defineProps } from 'vue';
// 传参
import type { Result } from './types';
const props = defineProps<{
  data: Result[];
  width: string;
  height: string;
}>();
// 使用hooks
import userEcharts from './useEacharts';
const { propValue, bloodTiesChartRef, initEchart, setOption } = userEcharts();
// 初始化执行
const internalData = ref(props);

watch(
  () => props,
  (newData) => {
    internalData.value = newData;
    propValue(internalData.value);
  },
  { immediate: true, deep: true }
);
onMounted(() => {
  // 初始化执行
  propValue(props);
  // 初始化执行
  watch(
    () => props.data,
    () => {
      setOption();
      initEchart();
    },
    { immediate: true }
  );
});
</script>

<style scoped></style>
